<template>
  <view>
    <nav-bar title="确认下单"></nav-bar>
    <view class="service-detail">
      <view class="service-title">服务详情</view>
      <view class="equipment">
       <view class="top">
        <view class="top-left">
          <image
            class="top-img"
            :src="serviceDetail.img || baseImgUrl + '/userImg/img_service_big_bg.png'"
            mode="aspectFill"
          />
        </view>
        <view class="top-right">
          <view class="title">{{ serviceDetail.name }}</view>
          <view class="number">
            <view>有效期:{{ Number(serviceDetail.validMonths) }}个月</view>
            <view class="frequency">×1</view>
          </view>
        </view>
       </view>
       <view class="equipment-detail">
        <view class="box-detail">
          <text class="detail-title">订单金额</text>
          <text>￥{{ Number(serviceDetail.price) }}</text>
        </view>
        <view class="box-detail">
          <text class="detail-title">服务天数</text>
          <text>
            {{ serviceDetail.validMonths }}个月({{ $utils.numberMul(serviceDetail.validMonths, 30) }}天)
          </text>
        </view>
        <view class="box-detail">
          <text class="detail-title">总计</text>
          <text class="total">￥{{ Number(serviceDetail.price) }}</text>
        </view>
       </view>
      </view>
    </view>
    <view class="service-content"> 
        <view class="service-title">服务内容</view>
        <view class="content">
          <rich-text class="text" :nodes="serviceDetail.serviceContent || '暂无服务内容'"></rich-text>
        </view>
      </view>
      <view class="form_bottom_btn">
        <view class="btn-box">
        <view class="confirm" @click="clickBuy">确认购买</view>
        </view>
      </view>
  </view>
</template>

<script>
  import api_common from '@/api/common'
  import { baseImgUrl } from '@/config'
  export default {
    name: 'ConfirmPlaceOrder',
    data() {
      return {
        baseImgUrl,
        serviceDetail: {},
        listData: [
          { content: '预约专家' },
          { content: '制定训练计划' },
          { content: '反馈跟踪' },
          { content: '训练计划修订' },
        ]
      }
    },
    onLoad(options) {
      this.serviceDetail = JSON.parse(decodeURIComponent(options.serviceDetail))
    },
    methods: {
      clickBuy() {
        const params = {
          price: this.serviceDetail.price,
          totalNum: 1,
          goodId: this.serviceDetail.id,
          orderType: 2 // 1 普通会员  2 vip定服务  3 康复辅具
        }
        api_common.fetchPayParams(params).then(res => {
          if (res.code !== 200) return
          const resParams = {
            timeStamp: res.data.data.timestamp,
            nonceStr: res.data.data.nonceStr,
            package: res.data.data.package,
            signType: res.data.data.signType,
            paySign: res.data.data.paySign
          }
          // 调用微信小程序的支付接口
          uni.requestPayment({
            ...resParams,
            success(res) {
              // 支付成功的回调
              uni.showToast({
                title: '支付成功！',
                icon: 'success',
                mask: true
              })
              uni.redirectTo({ url: '/subPages/userIndex/memberCenter/basicInfo' })
            },
            fail(res) {
              // 支付失败的回调
              uni.showToast({
                title: '支付失败',
                icon: 'none',
                duration: 2000
              })
              uni.redirectTo({ url: '/subPages/userIndex/memberCenter/basicInfo' })
            }
          })
        })
        
      }
    }
  }
</script>
<style lang="scss" scoped>
  .service-title{
    font-size: 32rpx;
    font-weight: 600;
    color: #000;
  }
  .service-detail{
      width: 690rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      padding: 30rpx 0 30rpx 30rpx;
      margin-top: 40rpx;
      margin: 0 auto;
    .equipment{
      border-radius: 16rpx;
      background: #FFFFFF;
      padding: 30rpx;
      margin-top: 30rpx;
      .top{
        display: flex;
        .top-left{
          .top-img{
            width: 120rpx;
            height: 80rpx;
            border-radius: 8rpx;
          }
        }
        .top-right{
          margin-left: 28rpx;
        .title{
          width: 352rpx;
          font-size: 32rpx;
          color: #333;
          font-weight: 600;
        }
        .number{
          width: 448rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: #999;
          margin-top: 20rpx;
        }
        }
      }
    }
    .equipment-detail{
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        color: #333;
        .detail-title{
          color:#999;
        }
        .box-detail{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 15rpx;
        }
        .total{
          color: #FF513A;
        }
      }
  }
  .service-content{
      width: 690rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      padding: 30rpx 0 30rpx 30rpx;
      margin-top: 30rpx;
      margin: 0 auto;
    .content{
      margin-top: 30rpx;
      font-size: 32rpx;
      color: #999;
    }
    }
</style>
